<template>
  <div class="delegation-card" @click="handleClick">
    <div class="card-header">
      <span class="tag">{{ delegation.pickup_type === 1 ? '快递' : '外卖' }}</span>
      <span class="time">{{ formatTime(delegation.created_at) }}</span>
    </div>
    <div class="card-content">
      <div class="locations">
        <div class="location">
          <img src="../assets/icons/aimpoint.svg" alt="定位" class="location-icon" />
          {{ delegation.pickup_address }}
        </div>
        <div class="location">
          <img src="../assets/icons/aimpoint.svg" alt="定位" class="location-icon" />
          {{ delegation.delivery_address }}
        </div>
      </div>
      <div class="price">¥{{ delegation.total_amount }}</div>
      <div class="dotted-line"></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
delegation: Object
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
emit('click', props.delegation.id, event)
}

// 添加时间格式化函数
const formatTime = (timestamp) => {
const date = new Date(timestamp)
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours().toString().padStart(2, '0')
const minute = date.getMinutes().toString().padStart(2, '0')
return `${month}-${day} ${hour}:${minute}发布`
}
</script>

<style scoped>
.delegation-card {
height: 120px;
background: var(--gradient-card);
border-radius: var(--border-radius-medium);
padding: 12px  15px;
margin-bottom: 1rem;
color: var(--text-primary);
position: relative;
}

.card-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
}

.tag {
width: 43px;
height: 21px;
background: #9a9a9a;
font-family: var(--font-family-bold);
font-size: 13px;
color: var(--text-light);
text-align: center;
border-radius: 5px;
margin: 0px 2px;
}

.time {
color: #5e646a;
font-size: var(--font-size-small);
font-family: var(--font-family-normal);
text-align: center;
margin-left: 20px;
}

.card-content {
display: flex;
margin-left: 4px;
justify-content: space-between;
align-items: center;
position: relative;


}

/* 添加伪元素来创建虚线边框 */
.card-content::after {

content: '';
position: absolute;
left: 5px;  /* 可调整左边距 */
bottom: -15px;  /* 可调整底部边距 */
width: calc(100% - -10px);  /* 控制横线长度 */
height: calc(100% - 5px);  /* 控制竖线高度 */
border-left: 2px dashed rgba(255, 255, 255, 1);
border-bottom: 2px dashed rgba(255, 255, 255, 1);
border-bottom-left-radius: 15px;
pointer-events: none;  /* 确保不影响内容交互 */
z-index: 0;  /* 控制层级 */
}

.locations {
display: flex;
font-family: var(--font-family-normal);
font-size: var(--font-size-large);
flex-direction: column;
gap: 2px;
margin-left: -3px;
z-index: 1;
}

.location {
color: #333333;
display: flex;
align-items: center;
gap: 4px;
}

.location-icon {
width: 20px;
height: 20px;
}

.price {
font-size: var(--font-size-large);
text-align: center;
color: #5e646a;
font-weight: 500;
padding:0px 17px; 
background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.8));
backdrop-filter: blur(40px);
border-radius: 10px;
}

.dotted-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
border-top: 1px dashed #000;
z-index: -1;
}
</style>